﻿@using IOA.MES.DataAccess.VModel
@{
    ViewBag.Title = "分拣规则配置";
    Layout = "~/Views/Shared/_LayoutPage.cshtml";

    var selections = ViewBag.Selections as Dictionary<string, List<string>>;
    var rules = ViewBag.Rules as List<VSortRule>;
    var machine = ViewBag.Machine as VMachine;
}

@section Contents{
    <style>
        .layui-form-select {
            display: none;
        }
        .rule_row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-direction: row;
            border-bottom: 1px solid #E6E6E6;
        }

            .rule_row .layui-inline {
                flex-grow: 0;
                display: flex;
                align-items: center;
            }

                .rule_row .layui-inline:nth-child(3) {
                    width: 200px;
                }

                .rule_row .layui-inline .layui-input-inline {
                    width: 100%;
                }

                .rule_row .layui-inline:last-child {
                    flex-grow: 1;
                }

                .rule_row .layui-inline input[type=checkbox] {
                    width: 20px;
                    height: 20px;
                }

                .rule_row .layui-inline input[type=text],
                .rule_row .layui-inline input[type=number],
                .rule_row .layui-inline select {
                    padding: 5px 15px;
                    width: 100%;
                    box-sizing: border-box;
                }

                .rule_row .layui-inline ul {
                    display: flex;
                    flex-direction: row;
                    flex-wrap: wrap;
                    justify-content: flex-start;
                    align-items: center;
                    padding-top: 10px;
                    padding-left: 10px;
                }

                .rule_row .layui-inline li {
                    margin-right: 10px;
                    margin-bottom: 10px;
                    border: 1px solid #009688;
                    padding: 2px 10px;
                }

                    .rule_row .layui-inline li i {
                        margin-left: 5px;
                        color: red;
                    }
    </style>
}

<div id="page"></div>

<script type="text/template" id="tplPage">
    <div class="layui-fluid">
        <div class="layui-card">
            <div class="layui-form layui-card-header layuiadmin-card-header-auto">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label" v-html="lang.Field.WorkShop">车间：</label>
                        <div class="layui-input-inline" style="width:120px">
                            <input type="text" value="@(machine?.WorkshopName)" class="layui-input" readonly />
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label" v-html="lang.Field.Machine">设备：</label>
                        <div class="layui-input-inline" style="width:120px">
                            <input type="text" value="@(machine?.MachineName)" class="layui-input" readonly />
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label" v-html="lang.Field.StackNo">堆位：</label>
                        <div class="layui-input-inline" style="width:120px">
                            <select v-model="selectedStackNo" style="display:block;padding:10px 20px;width:100px;">
                                <option v-bind="stackNo" v-for="stackNo in stackNos">{{stackNo}}</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button @@click="addStack" class="layui-btn layuiadmin-btn-list" type="button" style="margin-left:10px;">
                            <i class="layui-icon layuiadmin-button-btn">&#xe608;</i>
                        </button>
                        <button @@click="saveRules" class="layui-btn layuiadmin-btn-list" type="button" style="margin-left:10px;">
                            <i class="layui-icon layuiadmin-button-btn">&#x1005;</i>{{lang.Field.Submit}}
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-card" v-if="rules.length<=0">
            <div class="layui-card-body">
                <div style="text-align:center;padding:50px;">{{lang.Field.NoSortRules}}</div>
            </div>
        </div>

        <div class="layui-card" v-for="(rule, index) in rules">
            <div class="layui-card-header">
                {{lang.Field.StackNo}}：{{rule.StackNo}}
                <button class="layui-btn layui-btn-danger layui-btn-sm" type="button" @@click="delStack(index)" style="margin-left:20px;">{{lang.Field.Delete}}</button>
            </div>
            <div class="layui-card-body">
                <div class="rule_row">
                    <div class="layui-inline" style="width: 62px;"></div>
                    <div class="layui-inline">
                        <label class="layui-form-label">{{lang.Field.FullPackQuantity}}：</label>
                    </div>
                    <div class="layui-inline">
                        <div class="layui-input-inline">
                            <input type="number" v-model="rule.FullCount" />
                        </div>
                    </div>
                    <div class="layui-inline"></div>
                </div>
                <div class="rule_row">
                    <div class="layui-inline">
                        {{lang.Field.Verify}}：<input type="checkbox" v-model="rule.OrderNoCheck" />
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">{{lang.Field.OrderNo}}：</label>
                    </div>
                    <div class="layui-inline">
                        <div class="layui-input-inline">
                            <input type="text" @@keyup="addItem(rule.OrderNos, $event)" />
                        </div>
                    </div>
                    <div class="layui-inline">
                        <ul>
                            <li v-for="(value, valueIndex) in rule.OrderNos">{{value}}<i class="layui-icon" @@click="delItem(rule.OrderNos, valueIndex)">&#xe640;</i></li>
                        </ul>
                    </div>
                </div>
                <div class="rule_row">
                    <div class="layui-inline">
                        {{lang.Field.Verify}}：<input type="checkbox" v-model="rule.WorkOrderNoCheck" />
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">{{lang.Field.WorkorderNo}}：</label>
                    </div>
                    <div class="layui-inline">
                        <div class="layui-input-inline">
                            <input type="text" @@keyup="addItem(rule.WorkOrderNos, $event)" />
                        </div>
                    </div>
                    <div class="layui-inline">
                        <ul>
                            <li v-for="(value, valueIndex) in rule.WorkOrderNos">{{value}}<i class="layui-icon" @@click="delItem(rule.WorkOrderNos, valueIndex)">&#xe640;</i></li>
                        </ul>
                    </div>
                </div>
                <div class="rule_row">
                    <div class="layui-inline">
                        {{lang.Field.Verify}}：<input type="checkbox" v-model="rule.PowerLevelCheck" />
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">{{lang.Field.PowerLevel}}：</label>
                    </div>
                    <div class="layui-inline">
                        <div class="layui-input-inline">
                            <select @@change="addItem(rule.PowerLevels, $event, 'num')">
                                <option>请选择</option>
                                <option value="">空</option>
                                <option :value="item" v-for="item in selections.PowerLevels">{{item}}</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <ul>
                            <li v-for="(value, valueIndex) in rule.PowerLevels">{{value==null?'空':value}}<i class="layui-icon" @@click="delItem(rule.PowerLevels, valueIndex)">&#xe640;</i></li>
                        </ul>
                    </div>
                </div>
                <div class="rule_row">
                    <div class="layui-inline">
                        {{lang.Field.Verify}}：<input type="checkbox" v-model="rule.CurrentLevelCheck" />
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">{{lang.Field.CurrentLevel}}：</label>
                    </div>
                    <div class="layui-inline">
                        <div class="layui-input-inline">
                            <select @@change="addItem(rule.CurrentLevels, $event)">
                                <option>请选择</option>
                                <option value="">空</option>
                                <option :value="item" v-for="item in selections.CurrentLevels">{{item}}</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <ul>
                            <li v-for="(value, valueIndex) in rule.CurrentLevels">{{value==''?'空':value}}<i class="layui-icon" @@click="delItem(rule.CurrentLevels, valueIndex)">&#xe640;</i></li>
                        </ul>
                    </div>
                </div>
                <div class="rule_row">
                    <div class="layui-inline">
                        {{lang.Field.Verify}}：<input type="checkbox" v-model="rule.NameplateModelCheck" />
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">{{lang.Field.NameplateModel}}：</label>
                    </div>
                    <div class="layui-inline">
                        <div class="layui-input-inline">
                            <select @@change="addItem(rule.NameplateModels, $event)">
                                <option>请选择</option>
                                <option value="">空</option>
                                <option :value="item" v-for="item in selections.NameplateModels">{{item}}</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <ul>
                            <li v-for="(value, valueIndex) in rule.NameplateModels">{{value==''?'空':value}}<i class="layui-icon" @@click="delItem(rule.NameplateModels, valueIndex)">&#xe640;</i></li>
                        </ul>
                    </div>
                </div>
                <div class="rule_row">
                    <div class="layui-inline">
                        {{lang.Field.Verify}}：<input type="checkbox" v-model="rule.QLevelCheck" />
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">{{lang.Field.QLevel}}：</label>
                    </div>
                    <div class="layui-inline">
                        <div class="layui-input-inline">
                            <select @@change="addItem(rule.QLevels, $event)">
                                <option>请选择</option>
                                <option value="">空</option>
                                <option :value="item" v-for="item in selections.QLevels">{{item}}</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <ul>
                            <li v-for="(value, valueIndex) in rule.QLevels">{{value==''?'空':value}}<i class="layui-icon" @@click="delItem(rule.QLevels, valueIndex)">&#xe640;</i></li>
                        </ul>
                    </div>
                </div>
                <div class="rule_row">
                    <div class="layui-inline">
                        {{lang.Field.Verify}}：<input type="checkbox" v-model="rule.ComponentColorCheck" />
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">{{lang.Field.ComponentColor}}：</label>
                    </div>
                    <div class="layui-inline">
                        <div class="layui-input-inline">
                            <select @@change="addItem(rule.ComponentColors, $event)">
                                <option>请选择</option>
                                <option value="">空</option>
                                <option :value="item" v-for="item in selections.ComponentColors">{{item}}</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <ul>
                            <li v-for="(value, valueIndex) in rule.ComponentColors">{{value==''?'空':value}}<i class="layui-icon" @@click="delItem(rule.ComponentColors, valueIndex)">&#xe640;</i></li>
                        </ul>
                    </div>
                </div>
                <div class="rule_row">
                    <div class="layui-inline">
                        {{lang.Field.Verify}}：<input type="checkbox" v-model="rule.JunBoxFactoryCheck" />
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">{{lang.Field.BoxManuf}}：</label>
                    </div>
                    <div class="layui-inline">
                        <div class="layui-input-inline">
                            <select @@change="addItem(rule.JunBoxFactories, $event)">
                                <option>请选择</option>
                                <option value="">空</option>
                                <option :value="item" v-for="item in selections.JunBoxFactories">{{item}}</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <ul>
                            <li v-for="(value, valueIndex) in rule.JunBoxFactories">{{value==''?'空':value}}<i class="layui-icon" @@click="delItem(rule.JunBoxFactories, valueIndex)">&#xe640;</i></li>
                        </ul>
                    </div>
                </div>
                <div class="rule_row">
                    <div class="layui-inline">
                        {{lang.Field.Verify}}：<input type="checkbox" v-model="rule.JunBoxSpecsCheck" />
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">{{lang.Field.BoxSpecs}}：</label>
                    </div>
                    <div class="layui-inline">
                        <div class="layui-input-inline">
                            <select @@change="addItem(rule.JunBoxSpecses, $event)">
                                <option>请选择</option>
                                <option value="">空</option>
                                <option :value="item" v-for="item in selections.JunBoxSpecses">{{item}}</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <ul>
                            <li v-for="(value, valueIndex) in rule.JunBoxSpecses">{{value==''?'空':value}}<i class="layui-icon" @@click="delItem(rule.JunBoxSpecses, valueIndex)">&#xe640;</i></li>
                        </ul>
                    </div>
                </div>
                <div class="rule_row">
                    <div class="layui-inline">
                        {{lang.Field.Verify}}：<input type="checkbox" v-model="rule.BackPlanFactoryCheck" />
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">{{lang.Field.BackPanelManuf}}：</label>
                    </div>
                    <div class="layui-inline">
                        <div class="layui-input-inline">
                            <select @@change="addItem(rule.BackPlanFactories, $event)">
                                <option>请选择</option>
                                <option value="">空</option>
                                <option :value="item" v-for="item in selections.BackPlanFactories">{{item}}</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <ul>
                            <li v-for="(value, valueIndex) in rule.BackPlanFactories">{{value==''?'空':value}}<i class="layui-icon" @@click="delItem(rule.BackPlanFactories, valueIndex)">&#xe640;</i></li>
                        </ul>
                    </div>
                </div>
                <div class="rule_row">
                    <div class="layui-inline">
                        {{lang.Field.Verify}}：<input type="checkbox" v-model="rule.BackPlanSpecsCheck" />
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">{{lang.Field.BackPanelSpecs}}：</label>
                    </div>
                    <div class="layui-inline">
                        <div class="layui-input-inline">
                            <select @@change="addItem(rule.BackPlanSpecses, $event)">
                                <option>请选择</option>
                                <option value="">空</option>
                                <option :value="item" v-for="item in selections.BackPlanSpecses">{{item}}</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <ul>
                            <li v-for="(value, valueIndex) in rule.BackPlanSpecses">{{value==''?'空':value}}<i class="layui-icon" @@click="delItem(rule.BackPlanSpecses, valueIndex)">&#xe640;</i></li>
                        </ul>
                    </div>
                </div>
                <div class="rule_row">
                    <div class="layui-inline">
                        {{lang.Field.Verify}}：<input type="checkbox" v-model="rule.AluFrameFactoryCheck" />
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">{{lang.Field.BorderManuf}}：</label>
                    </div>
                    <div class="layui-inline">
                        <div class="layui-input-inline">
                            <select @@change="addItem(rule.AluFrameFactories, $event)">
                                <option>请选择</option>
                                <option value="">空</option>
                                <option :value="item" v-for="item in selections.AluFrameFactories">{{item}}</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <ul>
                            <li v-for="(value, valueIndex) in rule.AluFrameFactories">{{value==''?'空':value}}<i class="layui-icon" @@click="delItem(rule.AluFrameFactories, valueIndex)">&#xe640;</i></li>
                        </ul>
                    </div>
                </div>
                <div class="rule_row">
                    <div class="layui-inline">
                        {{lang.Field.Verify}}：<input type="checkbox" v-model="rule.AluFrameSpecsCheck" />
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">{{lang.Field.BorderSpecs}}：</label>
                    </div>
                    <div class="layui-inline">
                        <div class="layui-input-inline">
                            <select @@change="addItem(rule.AluFrameSpecses, $event)">
                                <option>请选择</option>
                                <option value="">空</option>
                                <option :value="item" v-for="item in selections.AluFrameSpecses">{{item}}</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <ul>
                            <li v-for="(value, valueIndex) in rule.AluFrameSpecses">{{value==''?'空':value}}<i class="layui-icon" @@click="delItem(rule.AluFrameSpecses, valueIndex)">&#xe640;</i></li>
                        </ul>
                    </div>
                </div>
                <div class="rule_row">
                    <div class="layui-inline">
                        {{lang.Field.Verify}}：<input type="checkbox" v-model="rule.BatteryFactory" />
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">{{lang.Field.CellFactory}}：</label>
                    </div>
                    <div class="layui-inline">
                        <div class="layui-input-inline">
                            <select @@change="addItem(rule.BatteryFactories, $event)">
                                <option>请选择</option>
                                <option value="">空</option>
                                <option :value="item" v-for="item in selections.BatteryFactories">{{item}}</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <ul>
                            <li v-for="(value, valueIndex) in rule.BatteryFactories">{{value==''?'空':value}}<i class="layui-icon" @@click="delItem(rule.BatteryFactories, valueIndex)">&#xe640;</i></li>
                        </ul>
                    </div>
                </div>
                <div class="rule_row">
                    <div class="layui-inline">
                        {{lang.Field.Verify}}：<input type="checkbox" v-model="rule.BatterySpecsCheck" />
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">{{lang.Field.CellSpecs}}：</label>
                    </div>
                    <div class="layui-inline">
                        <div class="layui-input-inline">
                            <select @@change="addItem(rule.BatterySpecses, $event)">
                                <option>请选择</option>
                                <option value="">空</option>
                                <option :value="item" v-for="item in selections.BatterySpecses">{{item}}</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <ul>
                            <li v-for="(value, valueIndex) in rule.BatterySpecses">{{value==''?'空':value}}<i class="layui-icon" @@click="delItem(rule.BatterySpecses, valueIndex)">&#xe640;</i></li>
                        </ul>
                    </div>
                </div>
                <div class="rule_row">
                    <div class="layui-inline">
                        {{lang.Field.Verify}}：<input type="checkbox" v-model="rule.BadReasonCheck" />
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">{{lang.Field.BadReason}}：</label>
                    </div>
                    <div class="layui-inline">
                        <div class="layui-input-inline">
                            <select @@change="addItem(rule.BadReasons, $event)">
                                <option>请选择</option>
                                <option value="">空</option>
                                <option :value="item" v-for="item in selections.BadReasons">{{item}}</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <ul>
                            <li v-for="(value, valueIndex) in rule.BadReasons">{{value==''?'空':value}}<i class="layui-icon" @@click="delItem(rule.BadReasons, valueIndex)">&#xe640;</i></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</script>

@section Scripts{
    <script>
        var vm = new Vue({
            el: "#page",
            template: "#tplPage",
            data: {
                lang: JSON.parse(lang).package,
                workshopCode: "@ViewBag.WorkshopCode",
                machineId: @machine.PkId,
                stackNos: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20],
                selectedStackNo: '',
                selections: @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(selections)),
                rules: @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(ViewBag.Rules)),
            },
            methods: {
                addStack() {
                    if (this.selectedStackNo == "") {
                        return;
                    }
                    var stackNo = parseInt(this.selectedStackNo);
                    var exist = this.rules.find((e) => {
                        return e.StackNo == stackNo
                    });
                    if (exist != null) {
                        return;
                    }
                    this.rules.push({
                        StackNo: stackNo,
                        FullCount: 30,
                        OrderNoCheck: false,
                        WorkOrderNoCheck: false,
                        PowerLevelCheck: false,
                        CurrentLevelCheck: false,
                        NameplateModelCheck: false,
                        QLevelCheck: false,
                        ComponentColorCheck: false,
                        JunBoxSpecsCheck: [],
                        JunBoxFactoryCheck: [],
                        BackPlanSpecsCheck: [],
                        BackPlanFactoryCheck: [],
                        AluFrameSpecsCheck: [],
                        AluFrameFactoryCheck: [],
                        BatterySpecsCheck: [],
                        BatteryFactoryCheck: [],
                        OrderNos: [],
                        WorkOrderNos: [],
                        PowerLevels: [],
                        CurrentLevels: [],
                        NameplateModels: [],
                        QLevels: [],
                        ComponentColors: [],
                        JunBoxSpecses: [],
                        JunBoxFactories: [],
                        BackPlanSpecses: [],
                        BackPlanFactorie: [],
                        AluFrameSpecses: [],
                        AluFrameFactories: [],
                        BatterySpecses: [],
                        BatteryFactories: [],
                    });
                    this.rules = this.rules.sort((e1, e2) => {
                        return e1.StackNo < e2.StackNo ? -1 : 1;
                    });
                },
                delStack(index) {
                    this.rules.splice(index, 1);
                },
                addItem(array, e, type) {
                    if (e.type == "keyup" && e.keyCode != 13) {
                        return;
                    }
                    array = array == null ? new Array() : array;
                    var value = e.target.value;
                    if (type == "num") {
                        value = value == "" ? null : parseFloat(value);
                    }
                    if (e.type == "keyup") {
                        e.target.value = "";
                    } else {
                        e.target.selectedIndex = 0;
                    }

                    if (array.indexOf(value) > -1) {
                        return;
                    }
                    array.push(value);
                },
                delItem(array, valueIndex) {
                    array.splice(valueIndex, 1);
                },
                saveRules() {
                    var loadId = layui.layer.load();
                    $.ajax({
                        url: "/ParaSetting/SaveSortRules",
                        data: {
                            workshopCode: this.workshopCode,
                            machineId: this.machineId,
                            rules: this.rules
                        },
                        complete: function () {
                            layui.layer.close(loadId);
                        },
                        success: function (res) {
                            if (res.ErrCode != 200) {
                                layui.layer.msg(res.ErrMsg, { icon: 5 });
                                return;
                            }
                            layui.layer.msg("修改成功！", { icon: 6, time: 1500 });
                        }
                    });
                }
            }
        });
    </script>
}
